"use client";

import Link from "next/link";
import Image from "next/image";
import { useState } from "react";

// 模拟新闻数据
const newsData = [
  {
    id: 1,
    title: "百善家政荣获'2023年度优秀家政服务企业'称号",
    date: "2023-12-20",
    category: "公司新闻",
    summary: "近日，在2023年度家政行业评选中，百善家政凭借优质的服务和良好的口碑，荣获'2023年度优秀家政服务企业'称号。",
    image: "/images/news1.jpg",
    tags: ["企业荣誉", "行业评选", "服务质量"],
    content: "近日，在2023年度家政行业评选中，百善家政凭借优质的服务和良好的口碑，荣获'2023年度优秀家政服务企业'称号。这是对我们多年来坚持服务品质的肯定，也是对我们全体员工辛勤工作的认可。百善家政将继续秉承'用心服务每一个家庭'的理念，不断提升服务质量，为更多家庭提供专业、贴心的家政服务。"
  },
  {
    id: 2,
    title: "百善家政举办'专业月嫂技能大赛'，提升服务质量",
    date: "2023-11-15",
    category: "公司新闻",
    summary: "为了进一步提升月嫂服务质量，百善家政于上月举办了'专业月嫂技能大赛'，来自全国各地的优秀月嫂参加了比赛。",
    image: "/images/news2.jpg",
    tags: ["月嫂服务", "技能大赛", "服务提升"],
    content: "为了进一步提升月嫂服务质量，百善家政于上月举办了'专业月嫂技能大赛'，来自全国各地的优秀月嫂参加了比赛。比赛内容包括婴儿护理、产妇照顾、营养餐制作等多个环节，全面考验月嫂的专业技能和应变能力。通过此次比赛，不仅选拔出了一批技能出众的优秀月嫂，也促进了经验交流和技能提升，为客户提供更优质的服务奠定了基础。"
  },
  {
    id: 3,
    title: "如何选择合适的育儿嫂？这些标准要知道",
    date: "2023-10-28",
    category: "家政知识",
    summary: "选择一位合适的育儿嫂对宝宝的成长至关重要。本文将为您介绍选择育儿嫂的关键标准，帮助您做出明智的选择。",
    image: "/images/news3.jpg",
    tags: ["育儿嫂", "选择标准", "育儿知识"],
    content: "选择一位合适的育儿嫂对宝宝的成长至关重要。本文将为您介绍选择育儿嫂的关键标准，帮助您做出明智的选择。首先，要看育儿嫂的专业资质和经验，优秀的育儿嫂应具备相关证书和丰富的实践经验；其次，观察育儿嫂与孩子的互动方式，良好的沟通和耐心是必不可少的；第三，了解育儿嫂的教育理念是否与家庭一致；最后，考虑育儿嫂的健康状况和个人品质。百善家政提供严格筛选的专业育儿嫂，满足不同家庭的需求。"
  },
  {
    id: 4,
    title: "家庭保洁小技巧：如何有效去除顽固污渍",
    date: "2023-10-15",
    category: "家政知识",
    summary: "日常生活中，我们经常会遇到各种顽固污渍。本文分享一些实用的清洁技巧，帮助您轻松去除各类顽固污渍。",
    image: "/images/news4.jpg",
    tags: ["家庭保洁", "清洁技巧", "污渍去除"],
    content: "日常生活中，我们经常会遇到各种顽固污渍。本文分享一些实用的清洁技巧，帮助您轻松去除各类顽固污渍。对于油渍，可以使用洗洁精或小苏打粉；对于水垢，可以使用白醋浸泡后擦拭；对于墙面的铅笔痕迹，可以用橡皮擦或面包屑轻轻擦拭；对于地毯上的污渍，可以先用纸巾吸干，再用专业清洁剂处理。正确的清洁方法不仅能有效去除污渍，还能延长家居用品的使用寿命。"
  },
  {
    id: 5,
    title: "百善家政新增'智慧养老'服务，满足多样化需求",
    date: "2023-09-20",
    category: "公司新闻",
    summary: "为了更好地满足老年人的多样化需求，百善家政近日推出了'智慧养老'服务，结合科技手段提供更全面的养老解决方案。",
    image: "/images/news5.jpg",
    tags: ["智慧养老", "新服务", "老年护理"],
    content: "为了更好地满足老年人的多样化需求，百善家政近日推出了'智慧养老'服务，结合科技手段提供更全面的养老解决方案。该服务包括智能健康监测、远程医疗咨询、紧急呼叫系统等功能，通过科技手段提升养老服务的便捷性和安全性。同时，我们的专业护理人员会定期上门提供生活照料、健康管理等服务，确保老年人得到全方位的关怀。'智慧养老'服务的推出，标志着百善家政在养老服务领域迈出了创新的一步。"
  },
  {
    id: 6,
    title: "家政服务行业发展趋势分析：品质化、专业化成主流",
    date: "2023-09-05",
    category: "行业资讯",
    summary: "随着人们生活水平的提高，家政服务行业正朝着品质化、专业化方向发展。本文分析了当前家政服务行业的发展趋势。",
    image: "/images/news6.jpg",
    tags: ["行业趋势", "品质服务", "专业化"],
    content: "随着人们生活水平的提高，家政服务行业正朝着品质化、专业化方向发展。本文分析了当前家政服务行业的发展趋势。首先，消费者对服务质量的要求不断提高，推动了家政服务的品质化发展；其次，家政服务的细分领域越来越专业，如月嫂、育儿嫂、养老护理等都需要专业的知识和技能；第三，互联网技术的应用使家政服务更加便捷高效；最后，规范化管理和品牌化经营成为行业发展的必然趋势。百善家政将紧跟行业发展趋势，不断提升服务品质和专业水平。"
  },
  {
    id: 7,
    title: "百善家政开展员工培训，提升服务水平",
    date: "2023-08-18",
    category: "公司新闻",
    summary: "为了提升服务水平，百善家政近日开展了一系列员工培训活动，内容涵盖专业技能、服务礼仪、沟通技巧等多个方面。",
    image: "/images/news7.jpg",
    tags: ["员工培训", "服务提升", "专业技能"],
    content: "为了提升服务水平，百善家政近日开展了一系列员工培训活动，内容涵盖专业技能、服务礼仪、沟通技巧等多个方面。此次培训邀请了行业资深专家进行授课，通过理论讲解和实践演练相结合的方式，帮助员工掌握最新的服务技能和标准。培训结束后，还进行了严格的考核评估，确保培训效果。百善家政一直注重员工的专业发展，定期组织各类培训活动，不断提升团队的整体素质和服务能力。"
  },
  {
    id: 8,
    title: "科学护理老人的方法与技巧",
    date: "2023-08-05",
    category: "家政知识",
    summary: "老年人的护理需要专业的知识和技巧。本文介绍了科学护理老人的方法，帮助家庭更好地照顾老年人。",
    image: "/images/news8.jpg",
    tags: ["老人护理", "养老知识", "健康管理"],
    content: "老年人的护理需要专业的知识和技巧。本文介绍了科学护理老人的方法，帮助家庭更好地照顾老年人。首先，要注意老年人的饮食健康，制定合理的膳食计划；其次，帮助老年人保持适当的运动，增强体质；第三，关注老年人的心理健康，多与老人沟通交流；第四，创造安全舒适的居住环境，预防意外伤害；最后，定期带老人进行健康检查，及时发现和处理健康问题。科学的护理方法不仅能提高老年人的生活质量，也能减轻家庭的照料负担。"
  },
];

// 提取所有标签并去重
const allTags = [...new Set(newsData.flatMap(news => news.tags))];

export default function NewsPage() {
  const [activeCategory, setActiveCategory] = useState("全部");
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedTags, setSelectedTags] = useState<string[]>([]);

  // 过滤新闻
  const filteredNews = newsData.filter(news => {
    // 类别过滤
    const categoryMatch = activeCategory === "全部" || news.category === activeCategory;
    
    // 搜索过滤
    const searchMatch = searchTerm === "" || 
      news.title.toLowerCase().includes(searchTerm.toLowerCase()) || 
      news.summary.toLowerCase().includes(searchTerm.toLowerCase());
    
    // 标签过滤
    const tagMatch = selectedTags.length === 0 || 
      selectedTags.some(tag => news.tags.includes(tag));
    
    return categoryMatch && searchMatch && tagMatch;
  });

  // 处理类别点击
  const handleCategoryClick = (category: string) => {
    setActiveCategory(category);
  };

  // 处理标签点击
  const handleTagClick = (tag: string) => {
    setSelectedTags(prev => 
      prev.includes(tag) 
        ? prev.filter(t => t !== tag) 
        : [...prev, tag]
    );
  };

  return (
    <div className="flex flex-col">
      {/* 页面标题 */}
      <section className="bg-blue-600 text-white py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h1 className="text-4xl font-bold mb-4">新闻动态</h1>
          <p className="text-xl max-w-3xl mx-auto">
            了解百善家政的最新动态、行业资讯和家政知识
          </p>
        </div>
      </section>

      {/* 搜索栏 */}
      <section className="py-8 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row gap-4 items-center justify-between">
            <div className="w-full md:w-1/2">
              <div className="relative">
                <input
                  type="text"
                  placeholder="搜索新闻..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="w-full px-4 py-3 pl-12 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                />
                <svg
                  className="absolute left-4 top-3.5 h-5 w-5 text-gray-400"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                  />
                </svg>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 新闻分类 */}
      <section className="py-6 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-wrap justify-center gap-4">
            <button
              onClick={() => handleCategoryClick("全部")}
              className={`px-6 py-2 rounded-full transition-colors ${
                activeCategory === "全部" 
                  ? "bg-blue-600 text-white" 
                  : "bg-white text-gray-700 hover:bg-gray-100"
              }`}
            >
              全部
            </button>
            <button
              onClick={() => handleCategoryClick("公司新闻")}
              className={`px-6 py-2 rounded-full transition-colors ${
                activeCategory === "公司新闻" 
                  ? "bg-blue-600 text-white" 
                  : "bg-white text-gray-700 hover:bg-gray-100"
              }`}
            >
              公司新闻
            </button>
            <button
              onClick={() => handleCategoryClick("行业资讯")}
              className={`px-6 py-2 rounded-full transition-colors ${
                activeCategory === "行业资讯" 
                  ? "bg-blue-600 text-white" 
                  : "bg-white text-gray-700 hover:bg-gray-100"
              }`}
            >
              行业资讯
            </button>
            <button
              onClick={() => handleCategoryClick("家政知识")}
              className={`px-6 py-2 rounded-full transition-colors ${
                activeCategory === "家政知识" 
                  ? "bg-blue-600 text-white" 
                  : "bg-white text-gray-700 hover:bg-gray-100"
              }`}
            >
              家政知识
            </button>
          </div>
        </div>
      </section>

      {/* 热门标签 */}
      <section className="py-6 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-lg font-semibold text-gray-700 mb-4">热门标签:</h2>
          <div className="flex flex-wrap gap-2">
            {allTags.map((tag) => (
              <button
                key={tag}
                onClick={() => handleTagClick(tag)}
                className={`px-3 py-1 text-sm rounded-full transition-colors ${
                  selectedTags.includes(tag)
                    ? "bg-blue-600 text-white"
                    : "bg-white text-gray-600 border border-gray-300 hover:bg-gray-100"
                }`}
              >
                #{tag}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* 新闻列表 */}
      <section className="py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {filteredNews.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {filteredNews.map((news) => (
                <div
                  key={news.id}
                  className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
                >
                  <div className="h-48 relative">
                    <Image
                      src={news.image}
                      alt={news.title}
                      fill
                      className="object-cover"
                    />
                  </div>
                  <div className="p-6">
                    <div className="flex justify-between items-center mb-2">
                      <span className="text-sm text-blue-600 font-medium">
                        {news.category}
                      </span>
                      <span className="text-sm text-gray-500">{news.date}</span>
                    </div>
                    <h3 className="text-xl font-semibold text-gray-900 mb-2">
                      {news.title}
                    </h3>
                    <p className="text-gray-600 mb-4 line-clamp-3">
                      {news.summary}
                    </p>
                    <div className="flex flex-wrap gap-2 mb-4">
                      {news.tags.map((tag) => (
                        <span
                          key={tag}
                          className="inline-block px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded"
                        >
                          #{tag}
                        </span>
                      ))}
                    </div>
                    <Link
                      href={`/news/${news.id}`}
                      className="text-blue-600 font-medium hover:text-blue-800"
                    >
                      阅读更多 &rarr;
                    </Link>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-12">
              <svg
                className="mx-auto h-12 w-12 text-gray-400"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
              <h3 className="mt-2 text-lg font-medium text-gray-900">没有找到相关新闻</h3>
              <p className="mt-1 text-gray-500">请尝试其他搜索条件或浏览全部新闻</p>
              <button
                onClick={() => {
                  setActiveCategory("全部");
                  setSearchTerm("");
                  setSelectedTags([]);
                }}
                className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
              >
                查看全部新闻
              </button>
            </div>
          )}

          {/* 分页 */}
          {filteredNews.length > 0 && (
            <div className="mt-12 flex justify-center">
              <nav className="flex items-center space-x-2">
                <button
                  className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
                >
                  上一页
                </button>
                <button
                  className="px-4 py-2 border border-blue-600 bg-blue-600 rounded-md text-sm font-medium text-white"
                >
                  1
                </button>
                <button
                  className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
                >
                  2
                </button>
                <button
                  className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
                >
                  3
                </button>
                <span className="px-4 py-2 text-gray-500">...</span>
                <button
                  className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
                >
                  下一页
                </button>
              </nav>
            </div>
          )}
        </div>
      </section>

      {/* 订阅新闻 */}
      <section className="py-16 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="bg-white rounded-lg shadow-md p-8 lg:p-12">
            <div className="text-center mb-8">
              <h2 className="text-3xl font-bold text-gray-900 mb-4">
                订阅我们的新闻
              </h2>
              <p className="text-lg text-gray-600 max-w-3xl mx-auto">
                订阅我们的新闻，获取最新的家政服务资讯、实用技巧和优惠活动
              </p>
            </div>
            <form className="max-w-xl mx-auto">
              <div className="flex flex-col sm:flex-row gap-4">
                <input
                  type="email"
                  placeholder="请输入您的邮箱"
                  className="flex-grow px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  required
                />
                <button
                  type="submit"
                  className="bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700 transition-colors"
                >
                  订阅
                </button>
              </div>
              <p className="mt-3 text-sm text-gray-500 text-center">
                我们尊重您的隐私，不会向第三方泄露您的信息
              </p>
            </form>
          </div>
        </div>
      </section>
    </div>
  );
} 